<template>
	<div class="shop-content">
		<!-- 直接赋值，远程本地都可行 -->
		<!-- <img src="../../assets/image/blue0913/1-2.png" class="backimage" /> -->
		<!-- <img src="https://www.baidu.com/img/flexible/logo/pc/result@2.png" class="backimage" /> -->
		
		<!-- 动态赋值，远程可行 -->
		<img :src=src class="backimage" />
		
		<!-- 如何在组件内部实现外部传进来的图片url -->
		<!-- <img :src=require(src) class="backimage" /> -->
		<div>
			<el-button type="text" @click="preViewParts">预览</el-button>
			<el-button type="text" @click="buyParts">购买</el-button>
		</div>
	</div>
</template>
<script>
	export default {
		created() {
			console.log("Parts created")
		},
		props: {	
			src: {
				type: String,
				// default: 'https://bkimg.cdn.bcebos.com/pic/8601a18b87d6277fe6dd952324381f30e824fcda?x-bce-process=image/watermark,image_d2F0ZXIvYmFpa2UxNTA=,g_7,xp_5,yp_5/format,f_auto'
				default: require("../../assets/image/blue0913/1-2.png")
			},
		},
		data() {
			return {

			};
		},

		methods: {
			preViewParts(index){
				console.log('ipreViewParts 被点击，index = ',index)
				this.$emit('preViewParts', index);
			},
			buyParts(index){
				console.log('buyParts 被点击，index = ',index)
				this.$emit('buyParts', index);
			}
		},
	}
</script>
<style scoped>
	.shop-content {
		height: 250px;
		width: 150px;
		margin-bottom: 50px;
		margin-left: 50px;
	}

	.backimage {
		height: 150px;
		width: 150px;
		background: #d3dce6;
	}

	.el-button {
		width: 45%;
		height: 35px;
		color: #4c4c4c;
		border: 1px solid #4c4c4c;
		font-size: 11px;
	}

	.el-button:hover {
		color: #ffffff;
		border: 1px solid #999999;
		color: gray;
	}

	.el-button:focus {
		color: #ffffff;
		border: 1px solid #b3b3b3;
		color: gray;
	}
</style>
